<style>
    .pic-item{
        margin-right:10px;
        width:138px;
        height:70px;
        position: relative;
        margin-top:6px;
    }
    .pic-item img{
        border:1px solid #ccc;
        width: 136px;
        height: 68px;
    }
    .pic-item .pic-del{
        display: none;
        position: absolute;
        right:0px;
        top:0px;
        cursor: pointer;
        width:20px;
        height:20px;
        background-color: rgba(0,0,0,0.5);
    }
    .pic-item:hover .pic-del{
        display: inline-block;
    }
</style>
<div class="table-header mt20 clearfix">
    <span class="fl lh30 f14 text-indent">户型列表：</span>
    <div class="fr btn-group">
        <a href="javascript: void(0)" class="btn btn-yellow permission p-500309-10" id="btn_add">添加户型</a>
    </div>
</div>
<div class="table-wrap mt10">
    <table width="100%">
        <thead>
            <tr>
                <th width="50">序号</th>
                <th>户型名称</th>
                <th width="200">户型编号</th>
                <th width="120">显示顺序</th>
                <th width="120">建筑面积(㎡)</th>
                <th width="120">操作</th>
            </tr>
        </thead>
        <tbody id="housetype_grid">
            <script id="housetype_row_tmpl" type="text/html">
            {{if list.length > 0}}
                {{each list as value i}}
                <tr>
                    <td height="40">{{i + 1}}</td>
                    <td>
                        <p>{{value.house_type_name}}</p>
                    </td>
                    <td>{{value.house_type_code}}</td>
                    <td>{{value.orders}}</td>
                    <td>{{value.bldarea}}</td>
                    <td id="{{value.b_regbroker_house_typeId}}">
                        <div class="js-oper-btn" style="display: none;">
                        <a href="javascript:void(0)" class="c-orange js-edit permission p-500309-10-inline">编辑</a>&nbsp;&nbsp;&nbsp;
                        <a href="javascript:void(0)" class="c-orange js-del permission p-500309-10-inline">删除</a>
                        </div>
                    </td>
                </tr>
                {{/each}}
            {{else}}
                <tr><td colspan="6"><div class="no-data"><span>暂无数据!</span></div></td></tr>
            {{/if}}
            </script>
        </tbody>
    </table>
</div>
<div id="housetype_pager" class="pagination"></div>

<!-- 新增户型 -->
<script id="add_housetype_tmpl" type="text/html">
<div style="max-height: 500px;overflow: auto;">
    <table width="100%">
      <tr>
        <td width="135" align="right" class="form-cell" valign="top"><span class="c-red">* </span>户型名称：</td>
        <td class="cell-split">
            <input type="text" id="house_type_name" class="input-text fl mr10" value="{{house_type_name}}" style="width:300px" maxlength="10">
            <p class="c-gray lh30">最多10个字，如：3室2厅2卫</p>
        </td>
      </tr>
      <tr>
        <td align="right" class="form-cell" valign="top"><span class="c-red">* </span>户型编号：</td>
        <td class="cell-split">
            <input type="text" id="house_type_code" class="input-text fl mr10" value="{{house_type_code}}" style="width:300px" maxlength="10"><p class="c-gray lh30">最多10个字，如A1</p>
            <p class="c-red lh30 none">不能为空</p>
        </td>
      </tr>
      <tr>
        <td align="right" class="form-cell" valign="top"><span class="c-red">* </span>建筑面积：</td>
        <td class="cell-split">
            <div class="count-box fl" style="width:300px; margin-right:5px" id="buildingArea">
              <input class="input-text" type="text" value="{{bldarea}}" placeholder="" id="bldarea" maxlength="6" />
              <span class="count">
                <span class="count-up"><i></i></span>
                <span class="count-down"><i></i></span>
              </span>
            </div>
            <span class="fl lh30 mr10" style="width:15px;">㎡</span>
            <p class="fl c-gray lh30">请输入数字，最多两位小数，如：90.89</p></td>
      </tr>
      <tr>
        <td align="right" class="form-cell" valign="top"><span class="c-red">* </span>显示顺序：</td>
        <td class="cell-split">
            <div class="count-box" style="width:300px" id="displayOrder">
              <input class="input-text" type="text" value="{{orders}}" placeholder="" id="orders" maxlength="4" data-min-value="0" data-reg="^\d+$" />
              <span class="count">
                <span class="count-up"><i></i></span>
                <span class="count-down"><i></i></span>
              </span>
            </div>
        </td>
      </tr>
      <tr>
        <td align="right" class="form-cell" valign="top">户型介绍：</td>
        <td class="cell-split">
            <div id="editor" style="width:550px;height:150px;"></div>
        </td>
      </tr>
      <tr>
        <td align="right" class="form-cell" valign="top"><span class="c-red">* </span>户型图片：</td>
        <td class="cell-split" id="td_house_type_pic">
            {{each house_type_pic as pic_url}}
                <div class="fl pic-item">
                    <span class="pic-del" title="删除"><i class="icon-op icon-op-del"></i></span>
                    <img src="{{pic_url}}" alt="户型图片" title="户型图片" />
                </div>
            {{/each}}
            
            <div id="fileupload" class="fileinput-button fl" title="点击上传图片">
                <div class="upload-wrap" id="img_wrap">
                    <div class="upload-btn"><i class="upload-icon"></i></div>
                    <span class="c-blue f12">上传图片</span>
                </div>
                <input type="file" name="file" accept="image/*" />
            </div>
            <p class="c-red lh30 none" id="house_type_pic_err" style="clear:both;"></p>
        </td>
      </tr>
    </table>
</div>
</script>

<script type="text/javascript">
seajs.use(["jquery","service/config/building_housetype"], function ($,building_housetype){
    $(function(){
        building_housetype.init();
    });
});
</script>